<template>
  <div class="container">
    <div class="container-header">
      <a-form :model="filters" layout="inline" :size="appStore.table.size">
        <a-form-item>
          <a-select v-model="filters.indexCategoryId" allow-clear placeholder="文章类型" @change="list">
            <a-option v-for="(i, x) in data.typelist" :key="x" :value="i.id" :label="i.name" />
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-input v-model="filters.title" placeholder="标题" allow-clear></a-input>
        </a-form-item>
        <a-form-item>
          <a-input v-model="filters.summary" placeholder="摘要描述" allow-clear></a-input>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit" @click="list">
            <template #icon> <icon-search /> </template>
            查询
          </a-button>
        </a-form-item>
      </a-form>

      <div class="action-btns">
        <a-button type="primary" :size="appStore.table.size" @click="showAdd">
          <template #icon>
            <icon-plus />
          </template>
          新增
        </a-button>
      </div>
    </div>
    <div class="container-main">
      <a-table :loading="loading" :data="data.results" :size="appStore.table.size" :bordered="appStore.table.bordered"
        :pagination="pagination" :sticky-header="true" style="height: 100%" column-resizable @page-change="onPageChange"
        @page-size-change="onPageSizeChange">
        <template #columns>
          <a-table-column title="编号" data-index="id" :width="80"></a-table-column>
          <a-table-column title="类别" data-index="indexCategoryId" :width="100">
            <template #cell="{ record }">
              {{ formatIndexCategory(record.indexCategoryId) }}
            </template>
          </a-table-column>
          <a-table-column title="封面图片" data-index="avatar" :width="90">
            <template #cell="{ record }">
              <a-avatar>
                <img v-if="record.cover" :src="record.cover" />
              </a-avatar>
            </template>
          </a-table-column>
          <a-table-column title="标题" data-index="title"></a-table-column>
          <a-table-column title="摘要描述" data-index="summary" :width="400">
            <template #cell="{ record }">
              <a-tooltip placement="topLeft">
                <div style="max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                  {{ record.summary || '' }}
                </div>
              </a-tooltip>
            </template>
          </a-table-column>
          <a-table-column title="创建时间" data-index="createdAt" :width="180">
            <template #cell="{ record }">
              {{ formatDateTime(record.createdAt) }}
            </template>
          </a-table-column>
          <a-table-column title="操作" :width="180">
            <template #cell="{ record }">
              <a-button type="primary" :size="appStore.table.size" @click="showEdit(record)">编辑</a-button>
              <a-popconfirm content="是否确定删除？" @ok="deleteAt(record.id)">
                <a-button type="primary" status="warning" style="margin-left: 20px"
                  :size="appStore.table.size">删除</a-button>
              </a-popconfirm>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>

    <Edit ref="edit" @ok="list" />
  </div>
</template>

<script setup lang="ts">
import Edit from './components/Edit.vue';

const appStore = useAppStore();
const loading = ref(false);
const edit = ref();
const filters = reactive({
  limit: 20,
  page: 1,

  id: undefined,
  indexCategoryId: undefined,
  title: undefined,
  summary: undefined
});
const data = reactive({
  page: {
    page: 1,
    limit: 20,
    total: 0,
  },
  typelist: [] as any,
  results: [],
});

const pagination = computed(() => {
  return {
    total: data.page.total,
    current: data.page.page,
    pageSize: data.page.limit,
    showTotal: true,
    showJumper: true,
    showPageSize: true,
    pageSizeOptions: [20, 50, 100, 200, 300, 500],
  };
});

onMounted(() => {
  useTableHeight();
  loadRoles();
});
const deleteAt = (id: any) => {
  edit.value.deleteAt(id);
};

const loadRoles = async () => {
  const res: any = await axios.get('/api/admin/index-category/list', {
    params: { page: 1, limit: 200 },
  });
  data.typelist = res.results;
};

const formatIndexCategory = (types: any) => {
  const res = data.typelist.find((item) => item.id === types);
  if (!res) {
    return "-";
  }
  return res.name;
};

const list = async () => {
  loading.value = true;
  try {
    const ret = await axios.postForm<any>(
      '/api/admin/index-article/list',
      jsonToFormData(filters)
    );
    data.page = ret.page;
    data.results = ret.results;
  } finally {
    loading.value = false;
  }
};

list();

const showAdd = () => {
  edit.value.show();
};

const showEdit = (obj: any) => {
  edit.value.showEdit(JSON.stringify(obj));
};

const onPageChange = (page: number) => {
  filters.page = page;
  list();
};

const onPageSizeChange = (pageSize: number) => {
  filters.limit = pageSize;
  list();
};
</script>

<style scoped lang="less"></style>
